// webpack 是 node 写出来的, node的写法
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
let OptimizeCss = require('optimize-css-assets-webpack-plugin')
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const { loader } = require('mini-css-extract-plugin')


module.exports = {
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true,
            }),
            new OptimizeCss()
        ]
    },
    devServer: {
        // 开发服务器的配置
        port: 5000,
        progress: true,
        contentBase: './build',
        compress: true,
        open: true
    },
    // mode: 'development', // 默认两种 production development
    mode: 'development',
    entry: './src/index.js', //  入口
    output: {
        filename: 'bundle.[hash:8].js', // 打包后的文件名
        path: path.resolve(__dirname, 'build'), // 路径必须是一个绝对路径 
    },
    plugins: [
        // 数组 放着所有的 webpack 插件
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
        }),
        new MiniCssExtractPlugin({
            filename: 'main.css',
        })
    ],
    module: { // 模块
        rules: [ // loader 默认是 从右到左 从下到上执行
            // {
            //     test: /\.js$/,
            //     use: {
            //         loader: 'eslint-loader',
            //     },
            //     enforce: 'pre' // previous 
            // },
            {
                test: /\.js$/, // normal 普通的 loader
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [ // 用 babel-loader 将 es6 转化成 es5
                            '@babel/preset-env'
                        ],
                        plugins: [
                            ["@babel/plugin-proposal-decorators", { "legacy": true }],
                            ["@babel/plugin-proposal-class-properties", { "loose": true }],
                            '@babel/plugin-transform-runtime'
                        ]
                    },
                },
                include: path.resolve(__dirname, 'src'),
                exclude: /node_modules/,
            },
            {   // css loader 解决 @import 这种语法的
                test: /\.css$/,
                // 只用一个 loader
                // 多个 loader 需要数组
                // use: 'css-loader'
                // loader 的顺序 默认是从右向左执行
                // loader 还可以写成对象的方式
                use: [
                    // 抽离 css
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader', options: {
                            postcssOptions: {
                                path: 'path/to/postcss.config.js'
                            }
                        }
                    },
                ]
            },
            {
                // 可以处理 less文件 sass stylus node-sass sass-loader
                // stylus stylus-loader
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'less-loader',
                ]
            },
        ]
    }
}